<template>
	<div class="index">
		<el-tabs v-model="currentName" tab-position="bottom" style="height: 28.2em" class="demo-tabs">
			<el-tab-pane label="地图模式" name="地图模式">
				<Map></Map>
			</el-tab-pane>
			<el-tab-pane label="监控模式" name="监控模式">
				<Monitoring></Monitoring>
			</el-tab-pane>
		</el-tabs>
		<div class="rowCC">
			<a class="bto-btn" v-for="(item, index) in tabList" :key="index" :style="{ background: currentName == item.name ? '#1f6fe4' : '' }" @click="tabsChange(item.name)">
				{{ item.name }}
			</a>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import Map from './components/Map.vue'
	import Monitoring from './components/Monitoring.vue'
	import {
		reactive,
		ref
	} from "vue"

	const currentName = ref < any > ('地图模式')

	const tabList = reactive < any > ([{
			name: '地图模式',
			key: 1
		},
		{
			name: '监控模式',
			key: 2
		},
		{
			name: '垃圾数据详情',
			key: 3
		},
		{
			name: '厢体状态详情',
			key: 4
		},
		{
			name: '车辆统计详情',
			key: 5
		},
		{
			name: '预警中心详情',
			key: 6
		},
	])

	const tableData = ref < any > ([])

	const tabsChange = (e: string) => {
		currentName.value = e
	}
</script>

<style scoped lang="scss">
	.index {
		color: #ffffff;

		:deep(.el-tabs__content) {
			padding: 0;
			font-weight: 600;
		}

		:deep(.el-tabs__nav-wrap) {
			display: none;
		}

		.bto-btn {
			padding: 0.7em 1em;
			background: #244a92;
			border-radius: 0.5em;
			font-size: 0.8em;
			margin: 0.4em;
		}
	}
</style>
